<template>
  <div class="home-wrapper">
    <div class="filters-wrapper"
         v-loading="loading_realtime">
      <el-row v-for="(searchModel, index) in chart_wheres"
              :key="index"
              type="flex"
              align="middle"
              style="flex-wrap: wrap; margin-bottom: 5px; position: relative">
        <el-tabs type="card"
                 v-model="activeName"
                 @tab-click="handleClick"
                 style="width: 100%">
          <el-tab-pane label="广告分组"
                       name="first"
                       border>
            <div class="form-wrapper">
              <div class="el-row is-align-middle el-row--flex" style="margin-bottom:10px">
                <span style="font-weight:600">当前主账号</span>：{{ code }}
              </div>
              <div class="el-row is-align-middle el-row--flex">
                <div class="form-wrapper">
                  <el-input v-model="seachid"
                            placeholder="广告计划编号"
                            size="small"
                            class="select-wrapper"
                            filterable
                            @change="chuanid">
                  </el-input>
                </div>
                <div class="form-wrapper"
                     style="margin-right: 10px">
                  <span class="filter-label">时间：</span>
                  <!-- <el-date-picker
                    v-model="searchModel.time"
                    size="small"
                    type="daterange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH"
                    align="right"
                    :clearable="false"
                  /> -->
                  <el-date-picker v-model="seachtime"
                                  size="small"
                                  type="daterange"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  value-format="yyyy-MM-dd"
                                  align="right"
                                  :clearable="false"
                                  @change="fenzutime">
                  </el-date-picker>
                </div>
                <!-- <div class="form-wrapper">
                  <el-select
                    v-model="searchModel.bargain"
                    placeholder="成交口径"
                    size="small"
                    class="select-wrapper"
                    filterable
                  >
                    <el-option></el-option>
                  </el-select>
                </div> -->
                <div class="form-wrapper">
                  <el-button data-v-6a3b3888=""
                             class="el-button--primary el-button"
                             style="float: left"
                             size="small"
                             @click="chaxun"><i class="el-icon-search"></i><span> 查询搜索 </span></el-button>
                  <!-- <el-button
                    data-v-6a3b3888=""
                    class="el-button--default el-button--mini"
                    style="float: left; margin-bottom: 15px"
                    ><i class="el-icon-refresh-right"></i
                    ><span> 重置 </span></el-button
                  >
                  <el-button
                    data-v-6a3b3888=""
                    class="el-button--success el-button--mini"
                    style="float: left; margin-bottom: 15px"
                    ><i class="el-icon-download"></i
                    ><span> 导出 </span></el-button
                  >
                  <el-button
                    data-v-6a3b3888=""
                    class="el-button--primary el-button--mini"
                    style="float: left; margin-left: 10px"
                    ><span> 链接配置 </span></el-button
                  > -->
                </div>
              </div>
              <el-table v-if="detils.length>0"
                        :data="
                  detils.slice(
                    (ggcurrentPage - 1) * ggpageSize,
                    ggcurrentPage * ggpageSize
                  )"
                        border
                        :header-cell-style="{'text-align': 'center',
                  background: '#f7f7f7',
                  color: '#666',
                }"
                        style="width: 100%">

                <el-table-column prop="ad_id"
                                 label="账户id"
                                 align="center">
                </el-table-column>
                <el-table-column prop="ad_name"
                                 label="账户名称"
                                 align="center">
                </el-table-column>
                <el-table-column prop="cost"
                                 label="消耗"
                                 align="center">
                </el-table-column>
                <el-table-column prop="show"
                                 label="显示次数"
                                 align="center">
                </el-table-column>
                <el-table-column prop="convert"
                                 label="转化次数"
                                 align="center">
                </el-table-column>
                <el-table-column prop="click"
                                 label="点击次数"
                                 align="center">
                </el-table-column>
                <el-table-column prop="order_cnt"
                                 label="总订单数量"
                                 align="center">
                </el-table-column>
                <el-table-column prop="order_amount"
                                 label="总订单数额"
                                 align="center">
                </el-table-column>
                <el-table-column prop="payed_cnt"
                                 label="支付订单数量"
                                 align="center">
                </el-table-column>
                <el-table-column prop="payed_amount"
                                 label="支付订单总额"
                                 align="center">
                </el-table-column>
                <el-table-column prop="roi_order"
                                 label="下单roi"
                                 align="center">
                </el-table-column>
                <el-table-column prop="roi_succ"
                                 label="成交roi"
                                 align="center">
                </el-table-column>
                <el-table-column prop="ctr"
                                 label="点击率"
                                 align="center">
                </el-table-column>
                <el-table-column prop="convert_rate"
                                 label="转化率"
                                 align="center">
                </el-table-column>
                <el-table-column prop="convert_cost"
                                 label="转化成本"
                                 align="center">
                </el-table-column>
                <el-table-column prop="f_amount"
                                 sortable
                                 label="失败订单总额"
                                 align="center">
                </el-table-column>
                <el-table-column prop="f_cnt"
                                 sortable
                                 label="失败订单数量"
                                 align="center">
                </el-table-column>
              </el-table>
              <div class="emptywrap"
                   v-else
                   slot="empty">
                <img src="../../assets/empty.jpg"
                     alt="">
                <el-button @click="$router.push('/')"
                           type="primary"
                           round
                           style="margin-top:20px;">返回首页</el-button>
              </div>
            </div>
            <el-row type="flex"
                    justify="end"
                    style="margin-top: 20px">
              <el-pagination background
                             @current-change="gghandleCurrentChange"
                             :current-page="ggcurrentPage"
                             :page-size="ggpageSize"
                             layout=" prev, pager, next"
                             :total="ggtotal">
              </el-pagination>
            </el-row>
          </el-tab-pane>

          <el-tab-pane label="订单明细"
                       name="second"
                       border>
            <div class="watchtime">
              <span>时间：</span>
              <el-date-picker v-model="value1"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              style="margin-bottom: 40px"
                              value-format="yyyy-MM-dd"
                              @change="shijian">
              </el-date-picker>
              <el-button type="primary"
                         icon="el-icon-search"
                         @click="seachlist">查询</el-button>
            </div>
            <el-table v-if="pops.length>0"
                      :data="
                pops.slice(
                  (ddcurrentPage - 1) * ddpageSize,
                  ddcurrentPage * ddpageSize
                )
              "
                      border
                      :header-cell-style="{
                'text-align': 'center',
                background: '#f7f7f7',
                color: '#666',
              }"
                      style="width: 100%">
              <el-table-column prop="order_id"
                               label="订单编号"
                               align="center">
              </el-table-column>
              <el-table-column prop="order_type"
                               label="订单类型"
                               align="center">
              </el-table-column>
              <el-table-column prop="aadv_id"
                               label="广告组id"
                               align="center">
              </el-table-column>
              <el-table-column prop="ad_id"
                               label="广告计划id"
                               align="center">
              </el-table-column>
              <el-table-column prop="goods_name"
                               label="商品信息"
                               align="center">
              </el-table-column>
              <el-table-column prop="goods_quantity"
                               sortable
                               label="支付订单数量"
                               align="center">
              </el-table-column>
              <el-table-column prop="order_amount"
                               sortable
                               label="实际支付金额"
                               align="center">
              </el-table-column>
              <el-table-column prop="order_time"
                               sortable
                               label="支付时间"
                               align="center">
              </el-table-column>
              <el-table-column prop="order_status"
                               sortable
                               label="订单状态"
                               align="center">
              </el-table-column>

            </el-table>
            <div class="emptywrap"
                 v-else>
              <img src="../../assets/empty.jpg"
                   alt="">
              <el-button @click="$router.push('/')"
                         type="primary"
                         round
                         style="margin-top:20px;">返回首页</el-button>
            </div>
            <el-row type="flex"
                    justify="end"
                    style="margin-top: 20px">
              <el-pagination background
                             @current-change="ddhandleCurrentChange"
                             :current-page="ddcurrentPage"
                             :page-size="ddpageSize"
                             layout=" prev, pager, next"
                             :total="ddtotal">
              </el-pagination>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
  </div>

</template>

<script>
// import { dataTypes, isAdmin, parseTime, pageParams } from "@/settings";
import { parseTime, pageParams } from "@/settings";
export default {
  data () {
    return {
      code: "",
      loading: false,
      jd_search: "",
      addproject: false,
      fullscreenLoading: false,
      full: true,
      dont: false,
      ggcurrentPage: 1,
      ggpageSize: 10,
      ggtotal: "",
      ddcurrentPage: 1,
      ddpageSize: 10,
      ddtotal: "",
      loading_realtime: false,
      curPage: 1,
      projectTotal: 0,
      activeName: "first",
      input: "",
      advertisinglist: [], //广告列表
      main_account: "123", //当前主账号
      pops: [],
      stat_time: "",
      end_time: "",
      stat: "",
      end: "",
      nowmonth: "",
      detils: [],
      value1: "",
      seachtime: "",
      seachid: "",
      chart_wheres: [
        {
          bargain: "", //成交口径
          adid: "", //广告计划编号
          datatype1: "cost",
          // datatype2: 'cost',
          time: [
            parseTime(new Date(), "{y}-{m}-{d} 00:00:00"),
            parseTime(new Date()),
          ],
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "昨天",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              end.setHours(23);
              end.setMinutes(0);
              end.setSeconds(0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "今天",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime());
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              end.setHours(23);
              end.setMinutes(0);
              end.setSeconds(0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              end.setHours(23);
              end.setMinutes(0);
              end.setSeconds(0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              end.setHours(23);
              end.setMinutes(0);
              end.setSeconds(0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              end.setHours(23);
              end.setMinutes(0);
              end.setSeconds(0);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted () {
    this.code = this.$route.query.code;
    this.loading_realtime = true;
    this.loadData();
    this.times();
    this.seachtimes();

    // this.$axios
    //   .get("/order/rep_cost", { account_id: this.code })
    //   .then((res) => {
    //     console.log(res);
    //     this.detils = res.data.data;
    //     this.loading_realtime = false;
    //   })
    //   .catch((e) => {
    //     console.log(e, 888);
    //   });
  },
  watch: {

  },
  methods: {
    gghandleCurrentChange (val) {
      this.ggcurrentPage = val;
    },
    ddhandleCurrentChange (val) {
      this.ddcurrentPage = val;
    },
    seachtimes () {
      let nowyear = new Date().getFullYear();
      //月份是从0月开始获取的，所以要+1;
      let nowmonth = new Date().getMonth() + 1;
      //日
      let nowday = new Date().getDate();
      if (nowmonth <= 9) {
        let months = "0" + nowmonth;
        let time = nowyear + "-" + months + "-" + nowday;
        this.stat = time;
        this.end = time;
        this.value1 = [this.stat, this.end];
        if (nowday <= 9) {
          let days = "0" + nowday;
          let time = nowyear + "-" + months + "-" + days;
          this.stat = time;
          this.end = time;
          this.value1 = [this.stat, this.end];
        } else {
          let time = nowyear + "-" + months + "-" + nowday;
          this.stat = time;
          this.end = time;
          this.value1 = [this.stat, this.end];
        }
      } else {
        let time = nowyear + "-" + nowmonth + "-" + nowday;
        this.stat = time;
        this.end = time;
        this.value1 = [this.stat, this.end];
        if (nowday <= 9) {
          let days = "0" + nowday;
          let time = nowyear + "-" + nowmonth + "-" + days;
          this.stat = time;
          this.end = time;
          this.value1 = [this.stat, this.end];
        } else {
          let time = nowyear + "-" + nowmonth + "-" + nowday;
          this.stat = time;
          this.end = time;
          this.value1 = [this.stat, this.end];
        }
      }
      this.$axios
        .get("/order/rep_cost", {
          account_id: this.code,
          stat: this.stat,
          end: this.end,
        })
        .then((res) => {
          if (res.code == 1) {
            console.log(res, 222);
            this.detils = res.data.data;
            this.ggtotal = this.detils.length;
            this.loading_realtime = false;
          }
        })
        .catch((e) => {
          console.log(e, 4444);
          //   if(e.status==111){

          // this.ggtotal = 0;
          this.loading_realtime = false;
          //   }

        });
    },
    fenzutime (seachtime) {
      this.stat = seachtime[0];
      this.end = seachtime[1];
    },
    chuanid (seachid) {
      this.seachid = seachid;
    },
    chaxun () {
      if (this.seachid == "") {
        this.$axios
          .get("/order/rep_cost", {
            account_id: this.code,
            stat: this.stat,
            end: this.end,
          })
          .then((res) => {
            console.log(res, 333);
            this.detils = res.data.data;
            this.ggtotal = this.detils.length;
            this.loading_realtime = false;
          })
          .catch((e) => {
            if (e) {
              this.full = false
              this.dont = true
            }
            this.detils = []
            console.log(e, 33);
            this.loading_realtime = false;
          });
      } else {
        this.$axios
          .get("/order/rep_cost", {
            account_id: this.code,
            ad_id: this.seachid,
            stat: this.stat,
            end: this.end,
          })
          .then((res) => {
            console.log(res, 111);
            this.detils = res.data.data;
            this.ggtotal = this.detils.length;
            this.loading_realtime = false;
          })
          .catch((e) => {
            if (e) {
              this.full = false
              this.dont = true
            }
            this.detils = []
            console.log(e, 55);
            this.loading_realtime = false;
          });
      }
    },
    times () {
      let nowyear = new Date().getFullYear();
      //月份是从0月开始获取的，所以要+1;
      let nowmonth = new Date().getMonth() + 1;
      //日
      let nowday = new Date().getDate();
      if (nowmonth <= 9) {
        let months = "0" + nowmonth;
        let time = nowyear + "-" + months + "-" + nowday;
        this.stat_time = time;
        this.end_time = time;
        this.seachtime = [this.stat_time, this.end_time];
        if (nowday <= 9) {
          let days = "0" + nowday;
          let time = nowyear + "-" + months + "-" + days;
          this.stat_time = time;
          this.end_time = time;
          this.seachtime = [this.stat_time, this.end_time];
        } else {
          let time = nowyear + "-" + months + "-" + nowday;
          this.stat_time = time;
          this.end_time = time;
          this.value1 = [this.stat_time, this.end_time];
        }
      } else {
        let time = nowyear + "-" + nowmonth + "-" + nowday;
        this.stat_time = time;
        this.end_time = time;
        this.value1 = [this.stat_time, this.end_time];
        if (nowday <= 9) {
          let days = "0" + nowday;
          let time = nowyear + "-" + nowmonth + "-" + days;
          this.stat_time = time;
          this.end_time = time;
          this.seachtime = [this.stat_time, this.end_time];
        } else {
          let time = nowyear + "-" + nowmonth + "-" + nowday;
          this.stat_time = time;
          this.end_time = time;
          this.value1 = [this.stat_time, this.end_time];
        }
      }

      this.$axios
        .get(
          "order/order_tb_find",
          // {
          //   aadv_id: 1743494097156125,
          //   stat: this.nowTime + `%2000:00:00`,
          //   end: this.nowTime + `%2023:00:00`,
          // }
          {
            code: this.code,
            stat: this.stat_time + " 00:00:00",
            end: this.end_time + " 23:59:59",
          }
          // `aadv_id=1743494097156125&stat=2022-09-12%2000:51:58&end=2022-09-12%2023:51:58`
        )
        .then((res) => {
          for (var i = 0; i <= res.data.msg.length; i++) {
            if (res.data.msg[i].order_type == 1) {
              res.data.msg[i].order_type = "京东";
              if (res.data.msg[i].order_status == 12) {
                res.data.msg[i].order_status = "订单付款";
              } else if (res.data.msg[i].order_status == 13) {
                res.data.msg[i].order_status = "订单失效";
              } else if (res.data.msg[i].order_status == 14) {
                res.data.msg[i].order_status = "订单成功";
              }
            } else if (res.data.msg[i].order_type == 2) {
              res.data.msg[i].order_type = "淘宝";
              if (res.data.msg[i].order_status == 12) {
                res.data.msg[i].order_status = "订单付款";
              } else if (res.data.msg[i].order_status == 13) {
                res.data.msg[i].order_status = "订单失效";
              } else if (res.data.msg[i].order_status == 14) {
                res.data.msg[i].order_status = "订单成功";
              }
            } else if (res.data.msg[i].order_type == 3) {
              res.data.msg[i].order_type = "拼多多";
              if (res.data.msg[i].order_status == -1) {
                res.data.msg[i].order_status = "未支付";
              } else if (res.data.msg[i].order_status == 0) {
                res.data.msg[i].order_status = "已支付";
              } else if (res.data.msg[i].order_status == 1) {
                res.data.msg[i].order_status = "已成团";
              } else if (res.data.msg[i].order_status == 2) {
                res.data.msg[i].order_status = "确认收货";
              } else if (res.data.msg[i].order_status == 3) {
                res.data.msg[i].order_status = "审核成功";
              } else if (res.data.msg[i].order_status == 4) {
                res.data.msg[i].order_status = "审核失败（不可提现）";
              } else if (res.data.msg[i].order_status == 5) {
                res.data.msg[i].order_status = "已经结算";
              } else if (res.data.msg[i].order_status == 8) {
                res.data.msg[i].order_status = "非多多进宝商品";
              }
            }

            this.pops = res.data.msg;
            this.ddtotal = this.pops.length;
          }
          this.loading_realtime = false;
        })
        .catch(() => {
        });
    },
    shijian (value1) {
      this.stat_time = value1[0];
      this.end_time = value1[1];
    },
    seachlist () {
      this.$axios
        .get(
          "order/order_tb_find",

          {
            code: this.code,
            stat: this.stat_time + " 00:00:00",
            end: this.end_time + " 23:59:59",
          }
        )
        .then((res) => {
          if (res.data.msg != "") {
            for (var i = 0; i <= res.data.msg.length; i++) {
              if (res.data.msg[i].order_type == 1) {
                res.data.msg[i].order_type = "京东";
                if (res.data.msg[i].order_status == 12) {
                  res.data.msg[i].order_status = "订单付款";
                } else if (res.data.msg[i].order_status == 13) {
                  res.data.msg[i].order_status = "订单失效";
                } else if (res.data.msg[i].order_status == 14) {
                  res.data.msg[i].order_status = "订单成功";
                }
              } else if (res.data.msg[i].order_type == 2) {
                res.data.msg[i].order_type = "淘宝";
                if (res.data.msg[i].order_status == 12) {
                  res.data.msg[i].order_status = "订单付款";
                } else if (res.data.msg[i].order_status == 13) {
                  res.data.msg[i].order_status = "订单失效";
                } else if (res.data.msg[i].order_status == 14) {
                  res.data.msg[i].order_status = "订单成功";
                }
              } else if (res.data.msg[i].order_type == 3) {
                res.data.msg[i].order_type = "拼多多";
                if (res.data.msg[i].order_status == -1) {
                  res.data.msg[i].order_status = "未支付";
                } else if (res.data.msg[i].order_status == 0) {
                  res.data.msg[i].order_status = "已支付";
                } else if (res.data.msg[i].order_status == 1) {
                  res.data.msg[i].order_status = "已成团";
                } else if (res.data.msg[i].order_status == 2) {
                  res.data.msg[i].order_status = "确认收货";
                } else if (res.data.msg[i].order_status == 3) {
                  res.data.msg[i].order_status = "审核成功";
                } else if (res.data.msg[i].order_status == 4) {
                  res.data.msg[i].order_status = "审核失败（不可提现）";
                } else if (res.data.msg[i].order_status == 5) {
                  res.data.msg[i].order_status = "已经结算";
                } else if (res.data.msg[i].order_status == 8) {
                  res.data.msg[i].order_status = "非多多进宝商品";
                }
              }

              this.pops = res.data.msg;
              this.ddtotal = this.pops.length;
            }
          } else {
            this.pops = [];
            this.ddtotal = this.pops.length;
          }

          this.loading_realtime = false;
        })
        .catch(() => {
        });
    },
    modifyName (index, row) {
      console.log(index);
      console.log(row);
    },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    loadData () {
      // 加载数据
      this.loadProjectListData({});
    },
    loadProjectListData (param) {
      param["keyword"] = this.jd_search;
      param["id_depart"] = this.depart_search;
      param["id_manager"] = this.manager_search;
      param["number"] = this.pageSize;
      if (!param["page"]) {
        param["page"] = 1;
      }
      this.curPage = param["page"];
      this.loading = true;
      this.$axios.get("/project/list", param).then((e) => {
        this.loading = false;
        this.projectTotal = e.data.total;
        this.advertisinglist = e.data.items;
      });
    },
    handleCurrentChange (val) {
      this.loadProjectListData({ page: val });
    },
  },
};
</script>

<style scoped>
.watchtime {
  padding-left: 20px;
  display: flex;
  justify-content: flex-start;
 justify-items: center;
}
.watchtime span{
  padding-top: 10px;
}
.watchtime button {
  margin-bottom: 40px;
  margin-left: 20px;
}
.emptywrap {
  width: 500px;
  height: 500px;
  z-index: 9999;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>